<template>
  <div class="repayment-record-container">
    <el-card class="repayment-record-card">
      <template #header>
        <div class="card-header">
          <h2>{{ t('repaymentRecord.title') }}</h2>
        </div>
      </template>
      
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="3" animated />
      </div>
      
      <div v-else-if="!repaymentStore.hasRecords" class="empty-container">
        <el-empty :description="t('repaymentRecord.noRecords')" />
      </div>
      
      <div v-else class="repayment-record-list">
        <el-table
          :data="repaymentStore.repaymentRecords"
          style="width: 100%"
          :default-sort="{ prop: 'repayTime', order: 'descending' }"
        >
          <el-table-column prop="tradeNo" :label="t('repaymentRecord.tradeNo')" width="180" />
          <el-table-column prop="amount" :label="t('repaymentRecord.amount')" width="120">
            <template #default="scope">
              ¥ {{ formatMoney(scope.row.amount) }}
            </template>
          </el-table-column>
          <el-table-column prop="repayTime" :label="t('repaymentRecord.repayTime')" width="180" sortable>
            <template #default="scope">
              {{ formatDate(scope.row.repayTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="repayTypeText" :label="t('repaymentRecord.repayType')" width="120" />
          <el-table-column prop="status" :label="t('repaymentRecord.status')" width="120">
            <template #default="scope">
              <el-tag :type="getRepaymentStatusType(scope.row.status)">
                {{ scope.row.statusText }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="t('repaymentRecord.operations')" fixed="right" width="120">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                plain
                @click="viewRecordDetail(scope.row.id)"
              >
                {{ t('repaymentRecord.view') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    
    <!-- 还款记录详情对话框 -->
    <el-dialog
      v-model="recordDetailVisible"
      :title="t('repaymentRecord.recordDetail')"
      width="500px"
    >
      <div v-if="currentRecord" class="record-detail">
        <el-descriptions :column="1" border>
          <el-descriptions-item :label="t('repaymentRecord.tradeNo')">
            {{ currentRecord.tradeNo }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('repaymentRecord.loanId')">
            {{ currentRecord.loanId }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('repaymentRecord.repaymentPlanId')">
            {{ currentRecord.repaymentPlanId }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('repaymentRecord.amount')">
            ¥ {{ formatMoney(currentRecord.amount) }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('repaymentRecord.repayTime')">
            {{ formatDate(currentRecord.repayTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('repaymentRecord.repayType')">
            {{ currentRecord.repayTypeText }}
          </el-descriptions-item>
          <el-descriptions-item v-if="currentRecord.bankCardId" :label="t('repaymentRecord.bankCard')">
            {{ getBankCardInfo(currentRecord.bankCardId) }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('repaymentRecord.status')">
            <el-tag :type="getRepaymentStatusType(currentRecord.status)">
              {{ currentRecord.statusText }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="t('repaymentRecord.createTime')">
            {{ formatDate(currentRecord.createTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRepaymentStore, useBankCardStore } from 'store';

// 国际化
const { t } = useI18n();

// 状态
const repaymentStore = useRepaymentStore();
const bankCardStore = useBankCardStore();

// 加载状态
const loading = ref(false);

// 还款记录详情对话框
const recordDetailVisible = ref(false);
const currentRecord = ref(null);

// 获取还款状态类型
const getRepaymentStatusType = (status) => {
  const statusMap = {
    0: 'warning', // 处理中
    1: 'success', // 成功
    2: 'danger'   // 失败
  };
  return statusMap[status] || 'info';
};

// 格式化金额
const formatMoney = (amount) => {
  return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '-';
  const date = new Date(dateString);
  return date.toLocaleString();
};

// 获取银行卡信息
const getBankCardInfo = (bankCardId) => {
  const card = bankCardStore.bankCards.find(card => card.id === bankCardId);
  if (card) {
    return `${card.bankName} (${formatCardNo(card.cardNo)})`;
  }
  return '-';
};

// 格式化银行卡号
const formatCardNo = (cardNo) => {
  if (!cardNo) return '';
  return cardNo.substring(0, 4) + ' **** **** ' + cardNo.substring(cardNo.length - 4);
};

// 查看还款记录详情
const viewRecordDetail = async (id) => {
  const record = await repaymentStore.getRepaymentRecordDetail(id);
  if (record) {
    currentRecord.value = record;
    recordDetailVisible.value = true;
  }
};

// 获取还款记录列表和银行卡列表
onMounted(async () => {
  loading.value = true;
  try {
    await Promise.all([
      repaymentStore.getRepaymentRecords(),
      bankCardStore.getBankCards()
    ]);
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped lang="scss">
.repayment-record-container {
  max-width: 1000px;
  margin: 0 auto;
}

.repayment-record-card {
  margin-bottom: 20px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h2 {
      margin: 0;
      font-size: 18px;
    }
  }
}

.loading-container, .empty-container {
  padding: 20px 0;
}
</style>